<template>
  <div>
    <el-container>
      <el-row type="flex" :style="comList.length === 1 ? '' : {width: `${50 * comList.length}%`}" style="overflow-x: scroll">
        <el-col v-for="(item1, index1) in comList" :key="index1">
          <el-row type="flex" justify="center">
            <el-col style="text-align: center" v-show="item1.phase === '1'">
              <h1>
                {{ item1.assessName }}
                <el-badge :value="1" class="item">
                  <el-button type="success" size="small">初期</el-button>
                </el-badge>
              </h1>
            </el-col>
            <el-col style="text-align: center" v-show="item1.phase === '2'">
              <h1>
                {{ item1.assessName }}
                <el-badge :value="3" class="item">
                  <el-button type="success" size="small">中期</el-button>
                </el-badge>
              </h1>
            </el-col>
            <el-col style="text-align: center" v-show="item1.phase === '3'">
              <h1>
                {{ item1.assessName }}
                <el-badge :value="2" class="item">
                  <el-button type="success" size="small">末期</el-button>
                </el-badge>
              </h1>
            </el-col>
            <el-col :span="2">
              <el-popconfirm
                title="确定删除吗？"
                @confirm="deleteAssess(index1)"
              >
                <el-button slot="reference" icon="el-icon-delete" circle></el-button>
              </el-popconfirm>
            </el-col>
          </el-row>

          <el-row>
            <el-col class="basicCondition">
              <el-row>
                <el-col>
                  <div>
                    <h3 class="h2Bold">一、基本情况</h3>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4">姓名: {{ pat.patientName }}</el-col>
                <el-col :span="4">性别: {{ gender }}</el-col>
                <el-col :span="4">年龄: {{ pat.patientAge }}</el-col>
                <el-col :span="4">科室: {{ pat.department }}</el-col>
              </el-row>
              <el-row>患者编号：{{ pat.patientNo }}</el-row>
              <el-row style="letter-spacing:0.1em;line-height: 1.5em;">病情摘要：{{ pat.illnessSummary }}</el-row>
              <el-row style="letter-spacing:0.1em;line-height: 1.5em;">既往史：{{ pat.preHistory }}</el-row>
              <el-row style="letter-spacing:0.1em;line-height: 1.5em;">诊断：{{ pat.preDiagnose }}</el-row>
              <el-row>
                <el-col :span="6">
                  评定日期：{{ item1.createTime.slice(0,10) }}
                </el-col>
                <el-col :span="6">
                  评定人：{{ item1.doctorName }}
                </el-col>
              </el-row>
            </el-col>
          </el-row>

          <div v-for="(item2,index2) in item1.assessConfig" :key="index2">
            <el-row type="flex" align="middle" style="margin-top: 10px">
              <el-col>
                <div class="grid-content">
                  <h3 class="h2Bold">{{ item2.titleName }}</h3>
                </div>
              </el-col>
            </el-row>
            <div class="containerClass">
              <el-row v-for="(assname, index3) in item2.assConfig" :assname="assname" :key="index3">
                <el-col :span="22" :offset="1">
                  <keep-alive>
                    <component
                      :is="assname"
                      :istrans="true"
                      :fromdata="comList[index1].assessData[assname]"
                    ></component>
                  </keep-alive>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-button type="success" style="height: 100%" @click="addComparisonAssess(comList)">新增对比表</el-button>
      </el-row>
      <el-footer style="display: flex;justify-content: center;">
        <el-button style="height:50px " type="primary" @click="fanhui">返 回</el-button>
        <el-button v-print="'#printMe'" type="primary" style="height:50px ">打印</el-button>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import {getAssess} from "@/api/gaoxin/assess";
import data_show from "@/views/gaoxin/patient/data_show";
import {getTask} from "@/api/gaoxin/taskdata";
import componentAll from "@/views/components/assesscoms/componentAll";
export default {
  name: "detail",
  components:{
    data_show,
  },
  created() {
    this.comList = this.$route.params.assdata
    // const assdata = this.$route.params.assdata
    // if(assdata.length > 1) { this.isdouble = true }
    // this.fromdata[0] = assdata[0];
    // if(this.isdouble) { this.fromdata[1] = assdata[1]; }
    this.pat = this.$route.params.pat;
    // this.quzhuanyi();
    // if(this.$route.params.taskId){
    //   getTask(this.$route.params.taskId).then(res => {
    //     this.assessname = res.data.assessName
    //     console.log('assessname',this.assessname)
    //     this.assessId = res.data.assessId;
    //     this.getass()
    //   })
    // }else{
    this.assessId = this.fromdata[0].assessId
    this.getass()
    // }
    /* getTask(this.$route.params.taskId).then(res => {
       this.assessname = res.data.assessName
       console.log('assessname',this.assessname)
       this.assessId = res.data.assessId;
       this.getass()
     })
     this.getass()*/
  },
  computed: {
    pdepartment(){
      if(this.pat.department === '0') return '手外科'
      if(this.pat.department === '1') return '骨科'
    },
    gender(){
      if(this.pat.patientGender === '0') return '男'
      if(this.pat.patientGender === '1') return '女'
      if(this.pat.patientGender === '2') return '未知'
    },
  },
  data() {
    return {
      taskId:"",
      isdouble:false,
      // 数据项
      fromdata: [],
      assessname: "",
      assessId: "",
      assdata: [],
      assess: [],
      comList: [],
      pat:{}
    }
  },

  methods: {
    fanhui(){
      this.$tab.closePage();
      this.$router.go(-1);
    },
    quzhuanyi() {
      var temp1 = this.fromdata[0].assessData;
      // console.log(String.toString(temp))
      var reg=/\\/g;
      let replaceAfter = temp1.toString().replace(reg,'');
      this.fromdata[0].assessData = JSON.parse(replaceAfter)
      if(this.isdouble){
        var temp1=this.fromdata[1].assessData;
        // console.log(String.toString(temp))
        var reg=/\\/g;
        let replaceAfter = temp1.toString().replace(reg,'');
        this.fromdata[1].assessData = JSON.parse(replaceAfter)
      }
    },
    getass() {
      getAssess(this.assessId).then(res => {
        this.assess = res.data;
        console.log('assess:',this.assess)
        this.comList = JSON.parse(this.assess.assessConfig);
        console.log('comList:',this.comList)
      })
    }
  }
}
</script>

<style>
.el-header{
  /*background-color: #B3C0D1;*/
  color: #333;
  text-align: center;
  line-height: 60px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.el-footer{
  text-align: center;
  line-height: 60px;
  width: 100%;
  /*height: ;*/
  bottom: 0;/*始终距离它的父元素的底部为0px.则是处于父元素的最底*/
}

.el-aside {
  /*background-color: #D3DCE6;*/
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  /*background-color: #E9EEF3;*/
  color: #333;
  height: auto;
  /*line-height: 160px;*/
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.basicCondition .el-row{
  margin-bottom: 20px;
}
.h2Bold {
  font-weight: 600;
}
</style>
